import React,{useState} from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import request from "../../axios/request.js";
import { useNavigate } from "react-router-dom";
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import styles from './Login.module.css'
const Index = () => {
  const [visible, setVisible] = useState(false)
  let navigate = useNavigate();
  const onFinish = async (values) => {
    const res = await request.post("/api/login", {
      username: values.username,
      password: values.password,
    });
    const { code, data } = res.data;
    if (code == 200) {
      navigate("/login");
      Toast.show({
        icon: "success",
        content: "注册成功",
      });
      localStorage.setItem("token", data.token);
      localStorage.setItem("avator", data.userInfo.avatar);
      localStorage.setItem("name", data.userInfo.nickname);
    } else {
      Toast.show({
        icon: "fail",
        content: "登录失败",
      });
    }

    console.log(res.data);
  };
  return (
    <div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Header>注册</Form.Header>
        <Form.Item
          name="username"
          label="姓名"
          rules={[
            { required: true, message: "姓名不能为空" },
            { pattern: /^1\d{10}$/, message: "请输入正确的手机号" },
          ]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            { required: true, message: "密码不能为空" },
            {
              pattern:
                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*.]).{6,20}$/,
              message: "请输入正确的密码",
            },
          ]}
        >
          <Input placeholder="请输入密码" type={visible ? 'text' : 'password'}/>
         
        </Form.Item>
        <div className={styles.eye}>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
      </Form>
    </div>
  );
};

export default Index;
